<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>分类</title>
		<!-- amazeui -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/ui/css/amazeui.min.css" />
		<!-- lib -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/lib/swiper/css/swiper.min.css" />
		<!-- app -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/ui.css" />
		<%-- <link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/base.css"/> --%>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/footer.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/list.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/HorizontalList.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/header.css"/>
		<style type="text/css">
			body,h1,h2,h3,h4,h5,h6,hr,p,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,textarea,th,td{margin:0;padding:0}
		body{
				font:14px / 1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
				-webkit-text-size-adjust:none; -webkit-user-select: none;
				background: #FFFFFF; 
			}
			ul,li{margin:0;padding:0}
			ul,li{-webkit-tap-highlight-color:rgba(0,0,0,0)}
			li,ul{list-style-type:none;}
			i{font-style:normal; font-weight:normal}
			input,select,textarea{font-size:12px;}
			input[type="submit"],input[type="reset"],input[type="button"],button{-webkit-appearance: none;}
			input:focus{outline:none;}
			.conter{
				margin-top: 40px;
				margin-bottom: 44px;
			}
			.fenlei{
				background-position: -28px 0px;
			}
			.shouye{
				background-position: 0px -28px;
			}
			.pic_container{
				width: 100%;
				margin-top: 15px;
				float: left;
			}
			.pic_container img{
				width: 50%;
				float: left;
			}
			.place{
				color: #585a5f;
			}
			 #search{
				margin-left: 10px;
				height: 34px;
				border-radius:50px ;
				color: #5C5C67;
				border: none;
				text-indent: 30px;
			}
			.shihui{
				width: 100%;
				float: left;
			}
			.logo_text{
				height: 40px;
				line-height: 40px;
				display: inline-block;
				color: #595b60;
				font-size: 14px;
				float: left;
			}

			.am-icon-chevron-up:before {
			    margin-top: 8px;
			}
			input{ border: none;}
		</style>
	</head>
	<body >
		<div class="container">
			<header>
				<div class="header">
					<span class="back" onclick="javascript:history.go(-1);"></span>
					<a href="${BASE_PATH}/index"><span class="logo_pic"></span></a>
					<span class="logo_text">OK 妈咪</span>
					<span class="place" onclick="search();">搜索</span>
					<img src="${BASE_PATH}/static/app/img/sousuo.png" alt="" class="sousuo" onclick="search();"/>
				</div>
			</header>
			<div class="conter">
				<div class="pic_container">
					<a href="${BASE_PATH}/goods/chanqian"><img src="${BASE_PATH}/static/app/img/chanqian.png" alt="" /></a>
					<a href="${BASE_PATH}/goods/chanhou"><img src="${BASE_PATH}/static/app/img/chanhou.png" alt="" /></a>
				</div>
				<div class="shihui">
					<span class="shihui_header">${title.title }</span>
					<ul id="shihui">
					</ul>
				</div>
				<div class="caini">
					<span class="caini_header">最新上架</span>
					<div id="recomGoodsList" class="am-g app-goods-list nin"></div>
				</div>
			</div>
			<div data-am-widget="gotop" class="am-gotop am-gotop-fixed" >
				<a href="#top"><span class="am-gotop-title">回到顶部</span><i class="am-gotop-icon am-icon-chevron-up"></i></a>
			</div>
			<footer>
				<ul>
					<a href="${BASE_PATH}/index"><li><i class="shouye"></i>首页</li></a>
					<%-- <a href="${BASE_PATH}/goods/fenlei"><li class="text_on"><i class="fenlei"></i>分类</li></a>
					<a href="${BASE_PATH}/goods/youxuan"><li><i class="youxuan"></i>妈咪优选</li></a> --%>
					<a href="${BASE_PATH}/goods/youxuan"><li  class="text_on"><i class="fenlei"></i>妈咪说</li></a>
					<a href=" https://h5.youzan.com/v2/showcase/homepage?alias=1fo6ae813&sf=wx_menu"><li><i class="youxuan"></i>商城</li></a>
					<a href="${BASE_PATH}/order/list"><li><i class="dingdan"></i>订单</li></a>
					<a href="${BASE_PATH}/my"><li><i class="my"></i>我的</li></a>
				</ul>
			</footer>
		</div>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery/jquery-1.11.2.min.js"></script>
		<!-- amazeui -->
		<script type="text/javascript" src="${BASE_PATH}/static/ui/js/amazeui.min.js"></script>
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/swiper/js/swiper.jquery.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/layer/layer.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/template/template.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-lazyload/jquery.lazyload.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-marquee/jquery.marquee.min.js"></script>
		<!-- app -->
		<script type="text/javascript" src="${BASE_PATH}/static/app/js/kit.js"></script>
 		<script src="${BASE_PATH}/static/app/js/swiper-3.4.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/html" id="dataTpla">
		{{each list as item}}
			<li onclick="detail({{item.id}});">
					<img src="${FTP_PATH}{{item.thumb}}" alt="" onerror="src='${BASE_PATH}/static/app/img/model.png';"/>
					<span class="jifen">{{if item.paytype==1}}商品积分{{else if item.paytype==2}}健康积分{{else if item.paytype==3}}教育积分 {{/if}} {{item.sellpoint}}</span>
					<span class="jifen"> ¥{{item.sellPrice}}	</span>
				<span class="price"> ¥{{item.marketPrice}}<i class="line"></i></span>
			</li>
		{{/each}}
	</script>
	<script type="text/html" id="dataTplb">
		{{each list as item}}
			<div class="am-u-md-4 am-u-lg-3 app-goods-item">
			<ul>
			<li onclick="detail({{item.id}});">
				<img src="${FTP_PATH}{{item.thumb}}" alt="" onerror="src='${BASE_PATH}/static/app/img/model.png';"/>
				<span class="tital">{{item.name}}</span>
				<span class="bot">
					{{if item.type==1}}
					<i class="caini_price">¥{{item.sellPrice}}</i>
					{{else if item.type==2}}
					<i class="caini_price">{{if item.paytype==1}}商品积分{{else if item.paytype==2}}健康积分{{else if item.paytype==3}}教育积分{{/if}} {{item.sellpoint}}</i>
					{{else if item.type==3}}
					<i class="caini_price">{{if item.paytype==1}}商品积分{{else if item.paytype==2}}健康积分{{else if item.paytype==3}}教育积分{{/if}} {{item.sellpoint}} + ¥{{item.sellPrice}}</i>
					{{/if}}
					<span class="men"><i class="men_price"><a class="aline"></a>门市价:¥{{item.marketPrice}}</i><i class="men_jian">已售{{item.countnum}}件</i></span>
				</span>
			</li>
			</ul>
			</div>
		{{/each}}
	</script>
		<script type="text/javascript">
			var width = $(".shihui ul li img").width();
			$(".shihui ul li img").height(width);
			var width = $(".caini ul li img").width();
			$(".caini ul li img").height(width);
			$(".caini ul li").height(width);
			function search(){
				var keyword=$("#search").val();
					window.location.href="${BASE_PATH}/goods/serchkey?keyword="+keyword;
			}
			var loading = false ,pageNum = 0, totalPage = 1;
			$(query);
			function query(){
				var cityId=${cityId};  //获取选中的项
            	Kit.ajax.post("${BASE_PATH}/goods/pageBytui",{pageNum:pageNum+1,pageSize:3},function(result){
					$("#shihui").append(template("dataTpla",result.object));
				});
            	Kit.util.onPageEnd(function(){
					if(pageNum < totalPage && !loading && pageNum < 5){
						loading = true;
		            	$("#recomGoodsList").append("<div class=\"app-loading\">正在加载</div>");
		            	Kit.ajax.post("${BASE_PATH}/goods/pageByxin",{pageNum:pageNum+1,pageSize:10,cityId:cityId},function(result){
							$("#recomGoodsList").append(template("dataTplb",result.object));
							//amazeui要求在最后一个元素上添加am-u-end样式，否则默认为右浮动
							$(".app-goods-item","#recomGoodsList").removeClass("am-u-end").last().addClass("am-u-end");
							//图片延迟加载
							$("img.lazyload","#recomGoodsList").not(".lazyload-binded").lazyload({
								failurelimit : 100,
								effect : "show"
							}).addClass("lazyload-binded");
							$(".app-loading","#recomGoodsList").remove();
							pageNum = result.object.pageNumber;
							totalPage = result.object.totalPage;
			            	//重置加载标识
							loading = false;
						});
					}
				});
			} 
			function detail(id){
				window.location.href="${BASE_PATH}/goods/jfdetail/"+id;
			}
		</script>
	</body>
</html>
